在 Compose 中，有些元件官方尚未提供或仍處於實驗階段，但我們可能仍然需要使用。為此，官方提供了一個名為 AndroidView 的 UI 元件，能夠幫助我們將傳統的 View 元件整合到 Compose 中。

在 AndroidView 中我們透過 factory 初始化 View 元件，並使用 update 來負責更新畫面。

@Composable
fun Greeting(modifier: Modifier = Modifier) {
    val mText = remember { mutableStateOf("") }
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
            .width(200.dp)
            .padding(16.dp)
    ) {
        AndroidView(
            factory = {
                TextView(it).apply {
                    text = "Hello ${mText.value}"
                    setTextColor(resources.getColor(R.color.purple_200, null))
                }
            },
            update = {
                it.text = "Hello ${mText.value}"
            }
        )
        Button(
            onClick = {
                mText.value = "Android"
            }
        ) {
            Text("Run")
        }
    }
}

如果是XML Layout

剛剛的範例為單一元件，如果換成 XML Layout。

@Composable
fun AndroidViewComposable(modifier: Modifier = Modifier) {
    val mText = remember { mutableStateOf("") }
    var tv: TextView? = null
    var btn: Button? = null
    AndroidView(
        factory = {
            LayoutInflater.from(it).inflate(R.layout.activity_info, null).apply {
                tv = findViewById(R.id.tv)
                btn = findViewById(R.id.btn)
                btn?.setOnClickListener {
                    mText.value = "Android"
                }
            }

        },
        update = {
            tv?.text = "Hello ${mText.value}"
        }
    )
}

如果是ViewBinding

官方提供了 AndroidViewBinding API，用於在 Jetpack Compose 中搭配 ViewBinding 使用的 XML Layout。

libs.versions.toml

androidx-viewbiding = { group = "androidx.compose.ui", name = "ui-viewbinding"}

build.gradle.kts

dependencies {
		.
		.
    implementation(libs.androidx.viewbiding)
		.
		.
}

@Composable
fun ViewBindingComposable(modifier: Modifier = Modifier) {
    AndroidViewBinding(ActivityInfoBinding::inflate) {
        this.btn.setOnClickListener {
            this.tv.text = "Hello Android"
        }
    }
}